<template>
  <div >
    <div ref="chart" style="width:400px; height:200px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "EchartsDonut",
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  beforeDestroy() {
    if (this.chartInstance) {
      window.removeEventListener("resize", this.resizeChart);
      this.chartInstance.dispose();
    }
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      this.chartInstance = echarts.init(chartDom);

      const option = {
        // tooltip: {
        //   trigger: 'item'
        // },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "70%",
            data: [
            { value: 20, name: '兼职', itemStyle: { color: '#f9ce8e' } },
            { value: 28, name: '全职', itemStyle: { color: '#2f96f3' } },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      this.chartInstance.setOption(option);
    },
    resizeChart() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },
  },
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>